<template>
    <div>
      <!-- 头部 -->
      <a-card class="headers">
        设备编号：
        <a-input v-model:value="name" placeholder="请输入" style="width: 200px" />
        <a-button type="primary" style="margin-left: 10px" @click="getdata()">
          <template #icon><SearchOutlined /></template>
          查询
        </a-button>
      </a-card>
      <!-- 表格 -->
      <a-card>
        <a-table :columns="columns" :data-source="datas" :pagination="false">
          <template #action="{ record }">
            <a-divider type="vertical" />
            <a @click="showModal">查看详情</a>
          </template>
          <template #state="{ record }">
           <span v-show="record.state==='0'">未投放</span>
           <span v-show="record.state==='1'">运营</span>
           <span v-show="record.state==='2'">撤机</span>
          </template>
          <template #state2="{ record }">
            <a-tag class="one">离线</a-tag>
            <a-tag class="tow">货道</a-tag>
            <a-tag class="three">转动轴</a-tag>
          </template>
        </a-table>
      </a-card>
      <!-- 分页 -->
      <div style="margin-top: 2.5vh; margin-bottom: 4vh" v-if="total > 10">
        <span style="color: #dbe5ef; font-size: 1rem; margin-left: 1rem">
          共{{ total }}条记录&nbsp;&nbsp;第 {{ page }}/{{
            Math.ceil(total / pageSize)
          }}页
        </span>
        <span style="float: right">
          <span style="margin-right: 3vw">
            <a-button
              style="background: #d5ddf8"
              :disabled="page <= 1"
              @click="onup"
              >上一页</a-button
            >
          </span>
          <span style="margin-right: 4vw">
            <a-button
              style="background: #d5ddf8"
              :disabled="page >= Math.ceil(total / pageSize)"
              @click="ondown"
              >下一页</a-button
            >
          </span>
        </span>
      </div>
      <!-- 详情 -->
      <a-modal v-model:visible="visible" title="设备详情" :footer="null">
        <div class="header">
          <div>销售量：<span>0个</span></div>
          <div>销售额：<span>0.00元</span></div>
          <div>补货次数：<span>0次</span></div>
          <div>维修次数：<span>0次</span></div>
        </div>
        <p>商品销售（月）</p>
        <p style="text-align: center;">当前设备未销售商品</p>
      </a-modal>
    </div>
  </template>
  <script setup>
  import { ref, reactive, toRefs, onMounted } from "vue";
  import {
    SmileOutlined,
    DownOutlined,
    SearchOutlined,
    PlusCircleOutlined,
    PlusOutlined, 
    LoadingOutlined,
  } from "@ant-design/icons-vue";
  import { Form, message } from "ant-design-vue";
  import {
    getequipmentTypes,
    getequipment,
  } from "@/api/peng/equipment";
  
  // 头部输入
  let name = ref("");
  // 表格配置
  const columns = [
    {
      title: "序号",
      dataIndex: "_id",
      key: "_id",
    },
    {
      title: "设备编号",
      dataIndex: "_id",
      key: "_id",
    },
    {
      title: "设备型号",
      dataIndex: "typeid.name",
      key: "_id",
    },
    {
      title: "详细地址",
      dataIndex: "ptid.xidi",
      key: "_id",
    },
    {
      title: "运营状态",
      key: "_id",
      slots: {
        customRender: "state",
      },
    },
    {
      title: "设备状态",
      key: "_id",
      slots: {
        customRender: "state2",
      },
    },
    {
      title: "操作",
      key: "action",
      slots: {
        customRender: "action",
      },
    },
  ];
  // 表格内容数据
  let datas = ref([]);
  let typedata = ref([]);
  // 获取数据
  const getTypedata = async () => {
    let { data } = await getequipmentTypes();
    console.log(data);
    typedata.value = data.data;
  };
  const getdata = async () => {
    let { data } = await getequipment(name.value,page.value,pageSize.value);
    console.log(data);
    datas.value = data.data;
    total.value = data.count;
  };
  // 分页
   // 当前页
   let page = ref(1);
  // 每页条数
   let pageSize = ref(10);
   // 总数量
   let total = ref(0);
   // 上一页
   const onup = () => {
    page.value--;
    getdata()
   };
   // 下一页
   const ondown = () => {
    page.value++;
    getdata()
   };
  //  详情控制区
   const visible = ref(false);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = e => {
      console.log(e);
      visible.value = false;
    };
  onMounted(() => {
    getdata();
    getTypedata()
  });
  </script>
  
  <style scoped>
  .but1{
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border:none;
    margin-bottom: 10px;
  }
  .but2{
    background-color: #fbf4f0!important;
    border: none;
    margin-bottom: 10px;
    margin-left: 10px;
    color: #655b56!important;
  }
  .one{
    background: linear-gradient(135deg, rgb(255, 176, 67), rgb(255, 192, 32)) rgb(255, 102, 95);
    height: 23px;
    padding: 0px 12px;
    /* background: linear-gradient(135deg, rgb(63, 201, 151), rgb(75, 218, 152)) rgb(255, 102, 95); */
    border-radius: 14px;
    text-align: center;
    color: rgb(255, 255, 255);
    line-height: 23px;
  }
  .tow,.three{
    /* background: linear-gradient(135deg, rgb(255, 176, 67), rgb(255, 192, 32)) rgb(255, 102, 95); */
    height: 23px;
    padding: 0px 12px;
    background: linear-gradient(135deg, rgb(63, 201, 151), rgb(75, 218, 152)) rgb(255, 102, 95);
    border-radius: 14px;
    text-align: center;
    color: rgb(255, 255, 255);
    line-height: 23px;
  }
  .header{
    height: 54px;
    background: rgba(227,233,245,.39);
    text-align: center;
    display: flex;
    margin-bottom: 20px;
  }
  .header div{
    flex: 1;
    line-height: 54px;
  }
  .header div span{
    color: blue;
  }
  </style>